import { Card, Row, Col, Statistic, Table, List } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined, UserOutlined, 
         MedicineBoxOutlined, DesktopOutlined, BellOutlined } from '@ant-design/icons';
import ReactECharts from 'echarts-for-react';

const Dashboard = () => {
  // KPI数据
  const kpiData = [
    { title: '总患者数', value: 128, prefix: <UserOutlined />, color: '#1890ff' },
    { title: '今日血糖异常', value: 8, prefix: <MedicineBoxOutlined />, color: '#f5222d' },
    { title: '在线设备', value: 42, prefix: <DesktopOutlined />, color: '#52c41a' },
    { title: '待处理告警', value: 3, prefix: <BellOutlined />, color: '#faad14' },
  ];

  // 血糖趋势数据
  const glucoseTrendOption = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value',
      name: '血糖 (mmol/L)'
    },
    series: [{
      data: [6.2, 5.8, 7.1, 6.5, 8.2, 7.8, 6.9],
      type: 'line',
      smooth: true,
      markLine: {
        data: [
          { yAxis: 7.0, name: '高血糖阈值' },
          { yAxis: 3.9, name: '低血糖阈值' }
        ]
      }
    }]
  };

  // 设备状态数据
  const deviceStatusData = [
    { name: '血糖仪-001', status: '在线', ip: '192.168.1.101' },
    { name: '血压计-002', status: '在线', ip: '192.168.1.102' },
    { name: '体重秤-003', status: '离线', ip: '192.168.1.103' },
    { name: '心电图-004', status: '在线', ip: '192.168.1.104' },
  ];

  // 最近告警数据
  const alertData = [
    { patient: '张三', time: '2025-10-31 08:30', value: '8.5 mmol/L', type: '高血糖' },
    { patient: '李四', time: '2025-10-31 07:45', value: '3.2 mmol/L', type: '低血糖' },
    { patient: '王五', time: '2025-10-31 06:20', value: '设备离线', type: '设备告警' },
  ];

  const columns = [
    { title: '设备名称', dataIndex: 'name' },
    { title: '状态', dataIndex: 'status', render: (status) => (
      <span className={status === '在线' ? 'success-tag' : 'danger-tag'}>
        {status}
      </span>
    )},
    { title: 'IP地址', dataIndex: 'ip' },
  ];

  return (
    <div>
      <h2>仪表盘</h2>
      
      {/* KPI卡片 */}
      <Row gutter={16} style={{ marginBottom: 24 }}>
        {kpiData.map((item, index) => (
          <Col span={6} key={index}>
            <Card className="kpi-card">
              <Statistic
                title={item.title}
                value={item.value}
                prefix={item.prefix}
                valueStyle={{ color: item.color }}
              />
            </Card>
          </Col>
        ))}
      </Row>

      {/* 图表和列表 */}
      <Row gutter={16}>
        <Col span={16}>
          <Card title="血糖趋势">
            <ReactECharts option={glucoseTrendOption} className="chart-container" />
          </Card>
        </Col>
        <Col span={8}>
          <Card title="设备在线状态">
            <Table 
              dataSource={deviceStatusData} 
              columns={columns} 
              pagination={false} 
              size="small"
              rowKey="name"
            />
          </Card>
        </Col>
      </Row>

      {/* 最近告警 */}
      <Row gutter={16} style={{ marginTop: 24 }}>
        <Col span={24}>
          <Card title="最近告警">
            <List
              dataSource={alertData}
              renderItem={(item) => (
                <List.Item>
                  <List.Item.Meta
                    title={item.patient}
                    description={`${item.time} - ${item.value} (${item.type})`}
                  />
                </List.Item>
              )}
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Dashboard;
